<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>默认展示界面</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js" ></script>
    <script type="text/javascript" src="/js/vue.js" ></script>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .lunbo{
            height: 600px;
        }
        .lunboimg{
            width: 100%;
            height: 620px;
        }
    </style>
</head>
<body>
    <div id="div">
        <template>
            <el-carousel :interval="4000" arrow="always"  height="620px">
                <el-carousel-item v-for="img in imgs" :key="img.id" >
                    <img :src="img.url" alt="" class="lunboimg">
                </el-carousel-item>
            </el-carousel>
        </template>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#div",
            data:{
                imgs:[
                    {
                        id:1,
                        url:'/img/lunbo1.png'
                    },
                    {
                        id:2,
                        url:'/img/lunbo2.png'
                    },
                    {
                        id:3,
                        url:'/img/lunbo3.png'
                    },
                    {
                        id:4,
                        url:'/img/lunbo4.png'
                    }
                ]
            }
        })
    </script>
</body>
</html>